<template>
  <div class="page">
    <div class="pd bg-white weui-cells re">
        <input type="text" maxlength='15' placeholder="请输入班级名称" v-model="name" placeholder-class="holder"/>
        <span class="ab c-ccc" :class="{'c-red':name.length==15}">{{15-name.length<0?0:15-name.length}}/15</span>
    </div>
    <div class="bg-white pdh-l mgt-xl">
      <notify-btn cls="ui btn primary" :loading="isLoading" @hit="onSave" :disabled="!name">
        保存
      </notify-btn>
    </div>
    <page-common></page-common>
  </div>
</template>

<script>
import PageCommon from '@/components/page-common'
import NotifyBtn from '@/components/notify-btn'
import {mapGetters, mapActions} from 'vuex'
import base from '@/mixins/base'
import * as $group from '@/api/group'

export default {
  mixins: [base],
  components: {
    PageCommon,
    NotifyBtn
  },
  data () {
    return {
      name: ''
    }
  },
  computed: {
    ...mapGetters([
      'group'
    ])
  },
  methods: {
    onPageShow () {
      this.name = this.group.name
    },
    async onSave () {
      let group = await $group.modifyInfo({groupId: this.group.id, name: this.name})
      this.$store.commit('UI_SET_TOAST_SUCCESS_MSG', '修改成功')
      if (!group) return
      wx.navigateBack()
    }
  },
}
</script>

<style scoped lang="less">
  .ab{
    right: 32rpx;
    top: 32rpx;
  }
</style>
